<template>
	<!-- 标题 -->
	<view>
	
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<!-- <block slot="content">{{time.year}}年{{time.month+1}}月</block> -->
			<!-- <block slot="right">
				<view class='checkEven'  @click="checkDay()">查看当日</view>
			</block> -->
		</cu-custom>
			<!-- 日历 -->
		<view>
		      <v-calendar name="calendar" :defaultTime="time" :extraData="extraData"  @calendarTap="calendarTap" />
		</view>
		
		<view class='schedulBG'></view>
		
		<!-- 我的排班 -->
		<view class="contentSchedul">
			我的排班--{{monthClick+1}}月{{dayClick}}日
		</view>
		<view class="cu-list menu zyq-haspad mylist marginTop">
			<view class="cu-item schedulContent">
				<view class="content">
					<image src="../../../static/u3764.png" mode="aspectFill" class="setimg"></image>
					<text class="text-grey chooseColor">{{className}}：{{classTime}}</text>
				</view>
			</view>
			<view class="cu-item ">
				<view class="content">
					<text class="text-grey noChooseColor">服务班组：{{careItemName}}</text>
				</view>
			</view>
		</view>
		
		
	</view>
	

	

</template>

<script>
	import calendar from '../../../components/tale-calendar/tale-calendar.vue';
	 export default {
	        data() {
	            return {
	                time: {},
					monthClick:'',//点击某一月的月份
					dayClick:'',//点击某一天的天
					className:'',//班次名称
					classTime:'',//班次时间
					careItemName:uni.getStorageSync('teamName'),//服务班组名称
	                extraData: [
	                    // {date: '2020-11-3', value: '签到', dot: true, active: true},
	                    // {date: '2020-11-5', value: '未签到', dot: true, active: false},
	                    // {date: '2020-11-7', value: '签到', dot: true, active: true}
	                ]
	            }
	        },
	        components: {
	            'v-calendar': calendar
	        },
			created(){
			},
			onLoad() {
				const  date=new Date;
				this.time.year= date.getFullYear()
				const m = date.getMonth()+1
				this.time.month =m < 10 ? '0' + m : m;
				this.getSchedul(this.time.year,this.time.month);
				this.getData();
			},
	        methods: {
				// 获取当前riq
				getData(){
					const date = new Date();
					this.dayClick  = date.getDate();
					this.monthClick =  date.getMonth()
				},
	            calendarTap(e) {
	                console.log(e);
					this.monthClick=e.month;
					this.dayClick=e.day
					this.className=e.value
					this.classTime=e.beginTime?e.beginTime+'~'+e.endTime:''
					// this.careItemName=uni.getStorageSync('teamName
	            },
				checkDay(){
					const  date=new Date;
					this.time.year= date.getFullYear()
					const m = date.getMonth()+1
					this.time.month =m < 10 ? '0' + m : m
				},
				// 获得排班
				getSchedul(year,month){
					console.log(month,'99999999')
					this.$http('/employee-service/schedulingInfo/listForEmployee','get',{yearAndMonth:year+'-'+month}).then(res=>{
					      if(res.data.data){
							  const data = res.data.data.list;
							  console.log(data)
							  this.extraData=[];
							  for (let i = 0; i < data.length; i++) {
							  	const num= data[i];
							  	const detail={
							  		date: '',
							  		value: '',
							  		dot: true,
							  		active: true,
							  		beginTime:'',
							  		endTime:''
							  	}
							  	detail.date=num.workDate
							  	detail.value=num.name;
							  	detail.beginTime=num.beginTime?num.beginTime:''
							  	detail.endTime=num.endTime?num.endTime:''
							  	this.extraData.push(detail)
							  }
						  }
						
					});
				},
				// 查看当日
				// checkDay(){
				// 	const  date=new Date;
				// 	this.time.year= date.getFullYear()
				// 	const m = date.getMonth()
				// 	this.time.month =m < 10 ? '0' + m : m,
				// },
	        }
	    }
</script>
	<style lang="scss">
	.checkEven{
		border: 1px solid rgb(242, 241, 245);
		margin-right: 10px;
		height: 30px;
		line-height: 29px;
		padding: 0 5px;
		border-radius: 5px;
	}
	.contentSchedul{
		text-align: center;
		font-size: 21px;
		border-bottom: 1px solid #ccc;
		padding: 5px 0px;
	}
	.schedulBG{
		height:10px;background:#eee
	}
	.marginTop{
		margin-top:5px;
	}
	
	.schedulContent{
		background: rgba(0, 87, 168, 1) !important;border-radius: 10px;
	}
	.chooseColor{
		color: #FFFFFF;
	}
	
	.noChooseColor{
		color: #000;
	}
	</style>
